<template>
  <div className="order">
    <Header title="订单"></Header>
    <div class="content">
      <van-tabs color="#ffc400">
        <van-tab v-for="i in navData" :title="i">
          <div
              v-for="i in store.state.orderListed"
              v-if="i === '全部' && store.state.orderListed.length"
          >
            <van-card
                :num="i.num"
                :price="i.price"
                :title="i.title"
                :thumb="i.pic"
            />
          </div>
          <Blank v-else />
        </van-tab>
      </van-tabs>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../../components/Footer";
import Header from "@/components/Header";
import {reactive, toRefs} from "vue";
import {useStore} from "vuex";
import Blank from "@/components/Blank";
export default {
  components: {
    Header,
    Footer,
    Blank,
  },
  setup(){
    const store=useStore();
    let data=reactive({
      navData:['全部','交易完成','待发货','已发货'],
    });

    return{
      ...toRefs(data),
      store,
    }
  }
}

</script>

<style lang="less" scoped>
.order{
  display: flex;
  flex-flow: column;
  height: 100%;

  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>